<template>
	<view>
		<z-paging ref="paging" v-model="dataList" @query="queryList" :auto="false" safeAreaInsetBottom>
			<view slot="top">
				<u-navbar :title="$t('greens.navText')" placeholder :autoBack="true" />
			</view>
			<view class="content">
				<view class="add" @click="goAdd('pagesA/my/addClassify')">
					<u-icon name="plus" color="#ffc102" size="40" labelColor="#a6a297" labelPos="bottom"
						:label="$t('greens.addClassify')" space="10px"></u-icon>
				</view>
				<view class="add" @click="goAdd('pagesA/my/addCuisine?type=add')">
					<u-icon name="plus" color="#ffc102" size="40" labelColor="#a6a297" labelPos="bottom"
						:label="$t('greens.addCuisine')" space="10px"></u-icon>
				</view>
				<view class="title">
					<image src="/static/image/merchant_18.png"></image>
					<view>{{$t('greens.title')}}</view>
				</view>
				<view class="list">
					<view class="item" v-for="(item,index) in dataList" :key="index">
						<image :src="imageUrl+item.image"></image>
						<view>{{language == 'zh' ? item.title : item.title_copy}}</view>
						<view class="btn">
							<u-button :text="$t('greens.edit')" @click="editCuisine(item)" shape="circle"
								:customStyle="editStyle"></u-button>
							<u-button :text="$t('greens.delete')" @click="deleteCuisine(item)" shape="circle"
								:customStyle="delStyle"></u-button>
						</view>
					</view>
				</view>
			</view>
		</z-paging>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {
				imageUrl:this.$DOMAIN_URL,
				dataList: [],
				editStyle: {
					background: "linear-gradient(90deg, rgba(255, 203, 12, 1) 0%, rgba(255, 223, 44, 1) 100%)",
					height: "60rpx",
					border: "none",
					margin: "0px",
					color: "#fff"
				},
				delStyle: {
					background: "linear-gradient(90deg, rgba(255, 134, 69, 1) 0%, rgba(255, 121, 48, 1) 100%)",
					height: "60rpx",
					border: "none",
					margin: "0px",
					color: "#fff"
				}
			};
		},
		computed: {
			...mapGetters(['merchant']),
			language() {
				return this._i18n.locale
			}
		},
		onLoad() {
			uni.$on("updateCuisine",()=>{
				this.$refs.paging.reload()
			})
		},
		onShow() {
			this.$refs.paging.reload()
		},
		methods: {
			queryList(pageNo, pageSize) {
				this.$http.post('wanlshop/shop/goodsList', {
					shop_id: this.merchant.id,
					page: pageNo,
					limit: pageSize
				}).then(res => {
					res.code == 1 ? this.$refs.paging.complete(res.data.data) :this.$refs.paging.complete(false)
					// if (res.code == 1) {
					// 	// if(res.data.category.length>0){
					// 	// 	res.data.category.forEach(item => {
					// 	// 		this.$refs.paging.complete(item.goods)
					// 	// 	})
					// 	// }else{
					// 	// 	this.$refs.paging.complete([])
					// 	// }
					// } else {
					// 	this.$refs.paging.complete(false)
					// }
				})
			},
			deleteCuisine(item) {
				uni.showLoading({
					title: "删除中...",
					mask: true
				})
				this.$http.get('wanlshop/shop/delGoods', {
					id: item.id
				}).then(res => {
					uni.hideLoading()
					if (res.code == 1) {
						this.$refs.paging.reload()
						setTimeout(() => {
							this.$refs.uToast.show({
								type: 'default',
								message: "删除成功",
								duration: 1000
							})
						}, 150)
					}
				})
			},
			goAdd(path) {
				uni.$u.route({
					url: path
				})
			},
			editCuisine(item) {
				uni.$u.route({
					url: "pagesA/my/addCuisine",
					params: {
						type: "edit",
						id: item.id
					}
				})
			}
		}
	}
</script>
<style>
	page {
		background: #f8f9fd;
	}
</style>
<style lang="scss" scoped>
	.add {
		background: #fffcf2;
		height: 240rpx;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 20rpx;
		// margin: 34rpx 34rpx 20rpx 34rpx;
	}

	.content {
		padding: 34rpx;

		.title {
			display: flex;
			align-items: center;
			color: #000;
			font-size: 32rpx;
			font-weight: bold;
			margin-bottom: 20rpx;

			image {
				width: 40rpx;
				height: 40rpx;
				margin-right: 10rpx;
			}
		}

		.list {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			grid-column-gap: 20rpx;
			grid-row-gap: 20rpx;

			.item {
				padding: 40rpx 24rpx;
				border-radius: 20rpx;
				background: rgba(255, 255, 255, 1);
				box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(0, 0, 0, 0.04);
				color: #000;
				font-size: 28rpx;
				font-weight: 400;
				text-align: center;

				image {
					width: 136rpx;
					height: 136rpx;
					border-radius: 50%;
					margin: 0 auto 20rpx;
				}
			}

			.btn {
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				grid-column-gap: 20rpx;
				margin-top: 40rpx;
			}
		}
	}
</style>
